<template>
	<div class="body">
		<view class="content">
			<div class="li">
				<div class="title">手机号</div>
				<input type="text" v-model="phone" placeholder="请输入手机号">
			</div>
			<div class="li">
				<div class="title">验证码</div>
				<div class="code">
					<input type="text" v-model="code" placeholder="请输入短信验证码">
					<div class="getcode" v-if="codeshow" @click="getcode">获取</div>
					<div class="getcode" v-else>{{yscode}}s</div>
				</div>
			</div>
		</view>
		<div class="btn" @click="login">手机号登录</div>
	</div>
</template>

<script>
	import Api from "../../API/api";
	import PathValue from "../../utils/pathValue";
	export default {
		data() {
			return {
				yscode: "60",
				codeshow: true,
				phone: null,
				code: null,
				wxCode: null
			}
		},
		 onShow () {
			 
			 //预加载主页
			 uni.preloadPage({
			   url: "/pages/index/index"
			 })
			 uni.preloadPage({
			   url: "/pages/user/index"
			 })
			 
			 //判断token
			 const a = uni.getStorageSync("token");
			 if (a) {
			   this.show = true
			   setTimeout(() => {
			     this.show = false
			     uni.redirectTo({
			       url: "/pages/index/index"
			     })
			   }, 200)
			   return;
			 }
			 
			 
			let code = PathValue.getUrlValue("code");
			if(code==""){
				Api.getPhone(this.phone).then(res=>{
					window.location.href = res.data
				})
			}else{
				this.wxCode = code;
			}
		},
		methods: {
			
			//手机号登录
			login() {
				Api.codeLogin({
					phone: this.phone,
					authCode: this.code,
					wxCode: this.wxCode
				}).then(res => {
					// alert(JSON.stringify(res))
					// uni.setStorageSync("token", res.data)
					uni.setStorageSync("token", res.data.accessToken)
					uni.redirectTo({
						url: '/pages/index/index'
					})
				})
			},
			// 获取验证码
			getcode() {
				Api.getcode(this.phone).then(res => {
					// alert(JSON.stringify(res))
					this.code = res.data;
				})

				this.codeshow = false
				this.yscode = 60
				setInterval(() => {
					if (this.yscode <= 0) {
						return
					}
					this.yscode--
				}, 1000)
				if (this.yscode == 1) {
					this.codeshow = true
					this.yscode = 60
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 90%;
		box-sizing: border-box;
		margin: 30rpx auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;

		.li {
			.title {
				color: #aaa;
				margin: 20rpx;
			}

			input {
				background-color: #f5f6fa;
				padding: 20rpx;
				border-radius: 80rpx;
				text-indent: 1em;
			}

			.code {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.getcode {
					width: 160rpx;
					height: 80rpx;
					border-radius: 48rpx;
					border: 2rpx solid #FD9509;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FD9509;
				}
			}

		}
	}

	.btn {
		width: 520rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #FFBD57 0%, #FD9509 100%);
		border-radius: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
	}
</style>